<div>
<div class="pannel">
    <div class="pannel-head">
        <p>
            <span class="title">南通市网络资产安全态势</span>
            <span class="count">（近期）</span>
        </p>
    </div>
    <div class="pannel-body">
        <div class="pannel-filter">
            <div class="pannel-filter-left">
                <nz-select style="width: 120px" [(ngModel)]="pages.keyLevel">
                    <nz-option nzValue="" nzLabel="全部企业"></nz-option>
                    <nz-option nzValue="Key" nzLabel="重点企业"></nz-option>
                    <nz-option nzValue="NonKey" nzLabel="非重点企业"></nz-option>
                </nz-select>
                <nz-select style="width: 120px" [(ngModel)]="pages.areaId">
                    <nz-option nzValue="" nzLabel="全市"></nz-option>
                    <nz-option *ngFor="let item of areaList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                </nz-select>
            </div>
            <div class="pannel-filter-right">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input type="text" nz-input [(ngModel)]="pages.name" placeholder="请输入企业名称" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon type="search"></i>
                </ng-template>
            </div>
        </div>
        <div class="index-title">
            <span class="title">企业目录</span>
            <span class="count"><i>358</i>重点企业，<i>552</i>资产，<i>682</i>端口，<i>621</i>IP，<i>23</i>漏洞，<i>351</i>通报</span>
        </div>
        <div>
            <nz-table class="pannel-body-table" #nzTable [nzData]="dataList" [nzShowPagination]="true" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" [nzShowTotal]="totalTemplate">
                <thead>
                    <tr>
                        <th>企业名称</th>
                        <th>安全负责人</th>
                        <th>联系电话</th>
                        <th>联系邮箱</th>
                        <th>地址</th>
                        <th>资产数</th>
                        <th>漏洞数</th>
                        <th>违规整改</th>
                        <th>通报数</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of dataList" (click)="selectThis(data)" [ngClass]="{active:data.id === selectRow.id}">
                        <td><img src="../../../../assets/img/icon-star.png" />{{ data.name }}</td>
                        <td>{{ data.safetyManager }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.contactEmail }}</td>
                        <td>{{ data.cityName + data.areaName + data.address }}</td>
                        <td>{{ data.assetTotalCount }}</td>
                        <td>{{ data.vulnTotalCount }}</td>
                        <td>0</td>
                        <td>0</td>
                        <td>
                            <span *ngIf="data.status === 'Normal'" style="color: #00A4FF;">正常</span>
                            <span *ngIf="data.status === 'Disabled'" style="color: #999999;">禁用</span>
                            <span *ngIf="data.status === 'ToBeRectified'" style="color: #f00;">待整改</span>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
            <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
        </div>
    </div>
</div>
<div class="index-pannel" *ngIf="selectRow && selectRow.id">
    <div class="pannel-assets">
        <div class="index-title">
            <span class="title">企业资产</span>
            <span class="count"><i>4</i>资产总数，<i>2</i>端口数，<i>2</i>协议类型</span>
        </div>
        <div>
            <nz-table class="pannel-body-table" [nzScroll]="{ y: '252px' }" [nzData]="dataList" [nzShowPagination]="false" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true">
                <thead>
                    <tr>
                        <th>资产名称</th>
                        <th>IP</th>
                        <th>端口</th>
                        <th>协议</th>
                        <th>MAC</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of dataList" (click)="selectThis(data)" [ngClass]="{active:data.id === selectRow.id}">
                        <td>{{ data.id }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.createTime }}</td>
                        <td>{{ data.createTime }}</td>
                        <td>{{ data.createTime }}</td>
                    </tr>
                </tbody>
            </nz-table>
            <!-- <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template> -->
        </div>
    </div>
    <div class="pannel-bugs">
        <div class="index-title">
            <span class="title">企业漏洞</span>
            <span class="count"><i>4</i>新增漏洞，<i>2</i>未扫描，<i>2</i>未修复</span>
        </div>
        <div>
            <nz-table class="pannel-body-table" [nzScroll]="{ y: '252px' }" [nzData]="dataList" [nzShowPagination]="false" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true">
                <thead>
                    <tr>
                        <th>漏洞名称</th>
                        <th>漏洞编号</th>
                        <th>等级</th>
                        <th>检查状态</th>
                        <th>修复状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of dataList" (click)="selectThis(data)" [ngClass]="{active:data.id === selectRow.id}">
                        <td>{{ data.id }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.createTime }}</td>
                        <td>{{ data.createTime }}</td>
                        <td>{{ data.createTime }}</td>
                    </tr>
                </tbody>
            </nz-table>
            <!-- <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template> -->
        </div>
    </div>
    <div class="pannel-message">
        <div class="index-title">
            <span class="title">企业通报</span>
            <span class="count"><i>4</i>总数，<i>2</i>资产核对，<i>2</i>违规通报</span>
        </div>
        <div>
            <nz-table class="pannel-body-table" [nzScroll]="{ y: '252px' }" [nzData]="dataList" [nzShowPagination]="false" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true">
                <thead>
                    <tr>
                        <th>通报时间</th>
                        <th>通报类型</th>
                        <th>通报内容</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of dataList" (click)="selectThis(data)" [ngClass]="{active:data.id === selectRow.id}">
                        <td>{{ data.id }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.createTime }}</td>
                    </tr>
                </tbody>
            </nz-table>
            <!-- <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template> -->
        </div>
    </div>
</div>
</div>